<script type="text/javascript">

    var geocoder;
    var map;
    var places, iw;
    var markers = [];
    var marker;
    var autocomplete;
    var listingMarkers = [];
    var MY_MAPTYPE_ID = 'custom_style';
              
    function initialize() {            
        try {
            var featureOpts = [ {
                    stylers: [{weight: 1}]
                }, {
                    elementType: 'labels'
                }, {
                    featureType: 'water'
                }
            ];
            
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(14.554729, 121.02444519999995);
            var myOptions = {
                zoom: 14,
                center: latlng,
                scrollwheel: false,
                navigationControl: false,
                mapTypeControl: false,
                scaleControl: false,
                mapTypeId: MY_MAPTYPE_ID
            };

            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            
            var styledMapOptions = {
                name: 'Custom Style'
            };

            var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);

            map.mapTypes.set(MY_MAPTYPE_ID, customMapType);

            places = new google.maps.places.PlacesService(map);
            
            google.maps.event.addListener(map, 'rightclick', function (event) {
                $("#lat").val(event.latLng.lat());
                $("#lng").val(event.latLng.lng());
                placeMarker(event.latLng);
            });
        } 
        catch (e) { alert(e); }
    }

    function placeMarker(location) {
        if (marker) {
            marker.setPosition(location);
            map.setCenter(location, 18);
        } 
        else {
            marker = new google.maps.Marker({
                position: location,
                map: map
            });
            map.setCenter(location, 18);
        }
    }

    function putMarker(number, id, title, desc, address, lat, lng, primaryPhoto) {
        try {
            if ( (lat != undefined && lat.replace(/^\s+|\s+$/g, '') != '') &&
                 (lng != undefined && lng.replace(/^\s+|\s+$/g, '') != '')) {

                var contentString = '<div class="MarkerPopUp" style="text-align:left; overflow:hidden; ">' +
                    '<div class="">' +
                    '<table border="0" width="300px;">' +                    
                    '<tr>' +
                    '<td style="padding:5px;"><a href="<c:out value="${model.props.appPath}"/>/listing/'+title+'/'+id+'"><img src="<c:out value="${model.props.rootPath}"/>/uploads/img/002-'+primaryPhoto+'" /></a></td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td style="padding:5px;"><a href="<c:out value="${model.props.appPath}"/>/listing/'+title+'/'+id+'"><span style="font-weight: bold; font-size:14px; font-family: Century Gothic, Calibri;">' + title + '</span></a></td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td style="padding:5px;"><span style="font-weight: normal; font-size:12px; font-family: Century Gothic, Calibri;">' + address + '</span></td>' +
                    '</tr>' +
                    '</table>' +
                    '</div>' +
                    '</div>';

                    var myLatlng = new google.maps.LatLng(lat, lng);
                    var marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'Hello World!' });
                    markers.push(marker);

                    var infoWindow = new google.maps.InfoWindow({
                        content: contentString
                    });

                    listingMarkers.push(marker);
                    google.maps.event.addListener(marker, 'click', function() {
                        infoWindow.open(map, marker);
                    });
                
                    //map.setCenter(myLatlng, 15);
            }
        } 
        catch (e) {
            alert("to?" + e);
        }
    }
        
    function codeListings() {  
        
        var id = '<c:out value="${model.place.id}"/> ';
        var title = '<c:out value="${model.place.title}"/> ';
        var address = '<c:out value="${model.place.address}"/> ';
        var lat = '<c:out value="${model.place.lat}"/> ';
        var lng = '<c:out value="${model.place.lng}"/> ';
        var primaryPhoto = '<c:out value="${model.place.primaryPhoto.filename}"/> ';

        var latLng = new google.maps.LatLng(lat, lng);
        placeMarker(latLng);
        //putMarker('<c:out value="${listingCtr}"/>', id, title, "", address, lat, lng, primaryPhoto);            
    }
    
    
</script>